<template>
    <div class="flex items-center min-h-screen w-screen">

        <!-- 右侧注册表单 -->

        <div class="mx-auto w-full max-w-sm ">
            <div class="text-center mb-8">
                <h2 class="text-3xl font-bold text-gray-900">创建账户</h2>
                <p class="mt-2 text-sm text-gray-600">
                    已有账户？
                    <router-link to="/login" class="font-medium text-indigo-600 hover:text-indigo-500">
                        立即登录
                    </router-link>
                </p>
            </div>

            <div class="bg-white py-8 px-4 shadow-sm rounded-lg sm:px-10">
                <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" class="space-y-6">
                    <el-form-item label="用户名" prop="userName">
                        <el-input v-model="form.userName" placeholder="请输入用户名" class="!h-[40px]" />
                    </el-form-item>


                    <el-form-item label="密码" prop="password">
                        <el-input v-model="form.password" type="password" placeholder="请输入密码" show-password
                            class="!h-[40px]" />
                    </el-form-item>

                    <el-form-item label="确认密码" prop="confirmPassword">
                        <el-input v-model="form.confirmPassword" type="password" placeholder="请确认密码" show-password
                            class="!h-[40px]" />
                    </el-form-item>

                    <div class="pt-2">
                        <el-button type="primary" @click="onSubmit" class="w-full !h-[40px] text-base">
                            立即注册
                        </el-button>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { registerApi } from '@/api/login'

const router = useRouter()
const formRef = ref<FormInstance>()

const form = reactive({
    userName: '',
    password: '',
    confirmPassword: ''
})

const validatePass2 = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请再次输入密码'))
    } else if (value !== form.password) {
        callback(new Error('两次输入密码不一致!'))
    } else {
        callback()
    }
}

const rules = reactive<FormRules>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
    ],

    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
    ],
    confirmPassword: [
        { required: true, validator: validatePass2, trigger: 'blur' }
    ]
})

const onSubmit = async () => {
    if (!formRef.value) return

    await formRef.value.validate(async (valid, fields) => {
        if (valid) {
            const params = {
                userName: form.userName,
                password: form.password
            }

            const res = await registerApi(params)

            if (res.code === 200 || res.code === 201) {
                ElMessage.success('注册成功！')
                router.push('/login')
            } else {
                ElMessage.error(res.message)
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = () => {
    if (!formRef.value) return
    formRef.value.resetFields()
}
</script>

<style scoped>
:deep(.el-form-item__label) {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

:deep(.el-input__wrapper) {
    background-color: #f9fafb;
    border-color: #e5e7eb;
}

:deep(.el-input__wrapper:hover) {
    border-color: #6366f1;
}

:deep(.el-button--primary) {
    background-color: #4f46e5;
    border-color: #4f46e5;
}

:deep(.el-button--primary:hover) {
    background-color: #4338ca;
    border-color: #4338ca;
}
</style>